<!-- 卖家---整体sku销量统计页面 -->
<template>
  <div class="container">
    <!-- *************************************搜索区************************************* -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <!-- 时间选择 -->
      <el-form-item>
        <el-switch
          @change="(type) => (queryParams.time = setStatisticsDefautTime(type))"
          v-model="queryParams.dateMark"
          active-color="#13ce66"
          inactive-color="#409eff"
          active-text="日"
          :active-value="'day'"
          inactive-text="月"
          :inactive-value="'month'"
        >
        </el-switch>
      </el-form-item>
      <el-form-item v-show="queryParams.dateMark == 'month'">
        <el-date-picker
          :picker-options="pickerOptions"
          @change="getList"
          style="width: 400px"
          :clearable="false"
          v-model="queryParams.time"
          type="monthrange"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item v-show="queryParams.dateMark == 'day'">
        <el-date-picker
          :picker-options="pickerOptions"
          @change="getList"
          style="width: 400px"
          :clearable="false"
          v-model="queryParams.time"
          type="daterange"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          <!-- 搜索 -->
          {{ $t('搜索') }}
        </el-button>
      </el-form-item>
    </el-form>
    <div class="chart" id="chart"></div>
  </div>
</template>

<script>
import { getSalesVolumeListBySku } from '@/api/statistics/wholeSaleSeller'
import * as echarts from 'echarts'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'WholeSaleSeller',
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          const sixMonthsAgo = new Date()
          sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6)
          return time.getTime() < sixMonthsAgo.getTime() || time.getTime() > Date.now()
        },
      },
      // 查询参数
      queryParams: {
        dateMark: 'day',
        time: [],
      },
    }
  },
  async created() {
    this.queryParams.time = this.setStatisticsDefautTime(this.queryParams.dateMark)
    this.getList()
  },

  methods: {
    drawCharts(data) {
      const { order, orderPackage } = data
      const xData = order.map((i) => i.createTime.split(' ')[0])
      const orderData = order.map((i) => i.value || 0)
      const orderPackageData = orderPackage.map((i) => i.value || 0)
      // console.log(
      //   ` ==>`,
      //   JSON.parse(
      //     JSON.stringify({
      //       xData,
      //       orderData,
      //       orderPackageData,
      //     }),
      //   ),
      // )
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },

        grid: {
          left: '60px',
          top: '60px',
          right: '60px',
          bottom: '40px',
        },

        legend: {
          data: ['订单数量', '包裹数量'],
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '订单数量',
            nameLocation: 'end', // 可选值: 'start', 'middle', 'end'
            nameTextStyle: {
              align: 'right', // 可选值: 'left', 'center', 'right'
            },
            min: 0,

            axisLabel: {
              formatter: '{value} 个',
            },
          },
          {
            type: 'value',
            name: '包裹数量',
            nameLocation: 'end', // 可选值: 'start', 'middle', 'end'
            nameTextStyle: {
              align: 'left', // 可选值: 'left', 'center', 'right'
            },
            min: 0,

            axisLabel: {
              formatter: '{value} 个',
            },
          },
        ],
        series: [
          {
            name: '订单数量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 个'
              },
            },
            data: orderData,
          },

          {
            name: '包裹数量',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 个'
              },
            },
            data: orderPackageData,
          },
        ],
      }
      const chartDom = document.getElementById('chart')

      let myChart = echarts.getInstanceByDom(chartDom)

      if (myChart == null) {
        myChart = echarts.init(chartDom)
      }
      myChart.setOption(option)
      //图形宽度随屏幕宽度改变而改变
      window.onresize = myChart.resize
    },

    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/

      getSalesVolumeListBySku(data).then((res) => {
        this.drawCharts(res.data)
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 40px;
  .chart {
    width: 100%;
    height: calc(100vh - 200px);
    border-radius: 8px;
  }
}
</style>
